<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		 <script src="../js/echarts.min.js"></script>
		 <style>
		 	.sant{
		 		width:100%;
		 	}
		 	
		 	.sant td{width:33%;text-align: center;color:#555555;}
		 	.t12{font-size:12px;}
		 	.sant .big{border: solid 1px #555555; border-top:none;border-bottom:none; font-size:20px;font-weight: bold;}
		 </style>
	</head>

	<body>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    	<div id="main" style="width: 100%;height:400px;"></div>
    
    	<table class="sant" border="0" width="100%">
    		<tr>
    			<td><span id='syestdayCEnergy'>61.2</span><br>kWh<br><span class="t12">昨日用电量</span></td>
    			<td class="big"><span id='sAllCEnergy'>224</span><br>kWh<br><span class="t12">当前用电量</span></td>
    			<td><span id='sdaypjCEnergy'>55.5</span><br>kWh<br><span class="t12">日平均用电量</span></td>
    		</tr>
    	</table>
    	<br>
    	<div id="main2" style="width: 100%;height:400px;"></div>
    	
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			
			
			var network = true;
				/* if(mui.os.plus){
					mui.plusReady(function () {
						if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
							network = false;
						}
						
						if(network){
							//begin
							mui.ajax('http://120.77.159.159/AppApi/GetPvCurrentData?username=%E6%B5%99%E6%B1%9F%E8%BF%88%E5%B0%9A&password=a123456&collectorID=6801010117260566',{
								data:{
									username2:'username',
									password2:'password'
								},
								dataType:'json',//服务器返回json格式数据
								type:'post',//HTTP请求类型
								timeout:10000,//超时时间设置为10秒；
								headers:{'Content-Type':'application/json'},	              
								success:function(data){
									
									if(data.code != 0)
									{
										mui.toast("系统忙，请稍后再试");
										return;
									}
									
									
									
							//end
									///////////
									
									
								},
								error:function(xhr,type,errorThrown){
									//异常处理；
									console.log(type);
								}
							});
							
							
							
						//end
							
							
							
							
						}else{
							mui.toast("当前网络不给力，请稍后再试");
						}
						
						
					});
				} */
				
				var result = 100;
													var max  = 100;
													
													result = 54.6;
													
													document.getElementById('sAllCEnergy').innerHTML = result;
													
													
													if(result > max)
													{
														max = result +50;
													}
													
													///////////
													option = {
							    tooltip : {
							        formatter: "{a} <br/>{b} : {c}kWh"
							    },
							   
							    series: [
							        {
							            name: '业务指标',
							            type: 'gauge',
							            detail: {formatter:'{value}'},
							            max: 100,
							            data: [{value: result, name: '用电量'}]
							        }
							    ]
							};
							   var myChart = echarts.init(document.getElementById('main'));
							   option.series[0].data[0].value = result;
							    myChart.setOption(option, true);
								
								setInterval(function () {
								    option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
								    myChart.setOption(option, true);
								},10000);
							
				var base = 5;
				var oneDay = 1;
				var date = [];
				
				var data = [Math.random() * 300];
				
				for (var i = 1; i < 14; i++) {
				    var now = (base +i);
				    date.push([now+'点']);
				    data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
				}
						
				myoption = {
				  
				    
				   
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: date
				    },
				    yAxis: {
				        type: 'value',
				        boundaryGap: [0, '100%']
				    },
				    
				    series: [
				        {
				            name:'模拟数据',
				            type:'line',
				            smooth:true,
				            symbol: 'none',
				            sampling: 'average',
				            itemStyle: {
				                normal: {
				                    color: 'rgb(255, 70, 131)'
				                }
				            },
				            areaStyle: {
				                normal: {
				                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				                        offset: 0,
				                        color: 'rgb(255, 158, 68)'
				                    }, {
				                        offset: 1,
				                        color: 'rgb(255, 70, 131)'
				                    }])
				                }
				            },
				            data: data
				        }
				    ]
				};
				var myChart2 = echarts.init(document.getElementById('main2'));
				
				 myChart2.setOption(myoption, true);
				
			
			
			
		</script>
	</body>

</html>